<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input[type=checkbox]+label{
				width: 128px;
				height: 48px;
				border: 1px solid #ccc;
				display: inline-block;
				border-radius: 24px;
				background-color: #369;
				position: relative;
				transition: border-bottom-color 2s;
				}
			input[type=checkbox]+label>span{
				width: 45px;
				height: 45px;
				/*border: 1px solid #ccc;*/
				border-radius: 50%;
				background-color: #FF4500;
				display: inline-block;
				position: absolute;
				left: 2px;
				top:2px;
				/*transition: left 2s;*/ 
				transition: transform 2s;
			}
			input[type=checkbox]:checked+label{
				background-color: #996633;
			}
			input[type=checkbox]:checked+label>span{
				/*left: 83px;*/
				transform: translateX(83px);
			}
		</style>
	</head>
	<body>
		<form action="" method="post">
			<input type="checkbox" name="hobby" id="chk1"/>
			<label for="chk1"><span></span></label>
			<input type="checkbox" name="hobby" id="chk2"/><label for="chk2"><span></span></label>
			<input type="checkbox" name="hobby" id="chk3"/><label for="chk3"><span></span></label>
			
			<!--<input type="submit" value=""/>-->
		</form>
	</body>
</html>
